<template>
    <div class="asnBill">
        <div class="publicSearch">
            <div class="searchBar" :style="{ height: isMoreSearch ? 'auto' : '' }">
                <el-button-group>
                    <el-button @click="getAsnData" size="mini" icon="el-icon-search"
                    >查询
                    </el-button>
                    <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh"
                    >重置
                    </el-button>
                </el-button-group>
                <div>
                    <span>入库单单号</span>
                    <el-input
                            v-model="searchData.billNo"
                            size="mini"
                            placeholder="入库单单号"
                            clearable
                    ></el-input>
                </div>

                <!--<div>-->
                <!--<span>收货状态</span>-->
                <!--<el-select-->
                <!--v-model="searchData.asnState"-->
                <!--size="mini"-->
                <!--filterable-->
                <!--placeholder="请选择收货状态"-->
                <!--clearable-->
                <!--&gt;-->
                <!--<el-option-->
                <!--v-for="(item, index) in approvalStates"-->
                <!--:key="index"-->
                <!--:label="item.label"-->
                <!--:value="item.value"-->
                <!--&gt;-->
                <!--</el-option>-->
                <!--</el-select>-->
                <!--</div>-->



                <div>
                    <span>供应商</span>
                    <el-select
                            v-model="searchData.supplierId"
                            size="mini"
                            filterable
                            placeholder="请选择供应商"
                            clearable
                    >
                        <el-option
                                v-for="(item, index) in suppliers"
                                :key="index"
                                :label="item.supplierName"
                                :value="item.supplierId"
                        >
                        </el-option>
                    </el-select>
                </div>

            </div>
            <span
                    class="moreSearchBtn"
                    :class="isMoreSearch ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                    @click="isMoreSearch = !isMoreSearch"
            ></span>
        </div>

        <!--新增数据-->
        <div class="headerBtns">
            <el-button
                    size="mini"
                    type="primary"
                    icon="iconfont icon-xinzeng"
                    @click="$router.push({ name: 'CreateMission' })"
            >
                新增
            </el-button>

        </div>

        <!--表格数据-->
        <div class="tableBox">
            <el-table
                    v-loading="loading.masterTable"
                    highlight-current-row
                    :data="asnBills"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                        fixed="left"
                        show-overflow-tooltip
                        prop="billNo"
                        label="单号"
                        width="100"
                >
                    <template slot-scope="scope">
            <span
                    class="textBtn"
                    @click="
                $router.push({
                  name: 'MissionDetail',
                  params: scope.row,
                })
              "
            >{{ scope.row.billNo }}</span
            >
                    </template>
                </el-table-column>



                <el-table-column
                        show-overflow-tooltip
                        prop="uda1"
                        label="履约号"
                        min-width="100"
                >

                </el-table-column>

                <el-table-column
                        show-overflow-tooltip
                        prop="uda2"
                        label="保管人"
                        min-width="100"
                >
                </el-table-column>


                <el-table-column
                        show-overflow-tooltip
                        prop="asnState"
                        label="状态"
                        width="100"
                >
                    <template slot-scope="scope">
                        <el-tag
                                v-for="(item, index) in asnStates"
                                :key="index"
                                v-if="scope.row.asnState === item.value"
                                :type="item.type"
                        >{{ item.label }}
                        </el-tag>
                    </template>
                </el-table-column>




                <el-table-column
                        show-overflow-tooltip
                        prop="supplierName"
                        label="供应商"
                        min-width="80"
                        width="100"
                >
                    <!--<template slot-scope="scope">-->
                    <!--<span-->
                    <!--class="textBtn"-->
                    <!--@click="$parent.showPublicModal(scope.row.supplierId, 'supplier')"-->
                    <!--&gt;{{ scope.row.supplierName }}</span-->
                    <!--&gt;-->
                    <!--</template>-->
                </el-table-column>

                <el-table-column
                        show-overflow-tooltip
                        prop="createTime"
                        label="创建时间"
                        min-width="100"
                >
                    <template slot-scope="scope">
                        {{ scope.row.createTime.substr(5, 11) }}
                    </template>
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="createUserName"
                        label="创建人"
                        min-width="100"
                >
                    <template slot-scope="scope">
            <span
                    @click="
                $EventBus.$emit(
                  'showPublicModal',
                  scope.row.createUserId,
                  'account'
                )
              "
                    type="text"
            >{{ scope.row.createUserName }}</span
            >
                    </template>
                </el-table-column>

                <el-table-column
                        show-overflow-tooltip
                        prop="memo"
                        label="备注"
                        min-width="120"
                >
                </el-table-column>
            </el-table>
            <el-pagination
                    class="pagination-bottom"
                    style="text-align: right"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="searchData.pageNum"
                    :page-sizes="[5, 10, 15, 20, 25]"
                    :page-size="searchData.pageSize"
                    layout="sizes,total, prev, pager, next"
                    :total="searchData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import { mapState } from "vuex";

    export default {
        name: "Mission",
        data() {
            return {
                isMoreSearch: false,
                loading: {
                    masterTable: true,
                },
                searchData: {
                    pageNum: 1,
                    pageSize: 10,
                    total: null,
                    keyWords: "",
                    wareId: PF.getLocal("wareId", "number"),
                    state: null,
//                    organizationId: null,
                    supplierId: null,
                    carrierId: null,
                    asnState: null,
                    billNo: "",
                    billSource: "",
                    asnType: "",
                    platformCode: "",
                    orderNo: "",
                    createTimeArr: [],
                    expectTimeArr: [],
                    startCreateTime: "",
                    endCreateTime: "",
                    startExpectTime: "",
                    endExpectTime: "",
                },
                asnBills: [],
                platforms: [],
                carriers: [],
                formLabelWidth: "120px",
                asnUdfHs: [],
//                organizations: [],
                suppliers: [],
                multipleSelection: [],
                asnTypes: [],

            };
        },
        computed: {
            ...mapState(["reviewStates", "asnStates", "qcStates","approvalStates"]),
        },
        methods: {
            handleSizeChange(val) {
                this.searchData.pageSize = val;
                this.getAsnData();
            },

            handleCurrentChange(val) {
                this.searchData.pageNum = val;
                this.getAsnData();
            },
            clearSearchData() {
                this.searchData.keyWords = "";
                this.searchData.state = null;
//                this.searchData.organizationId = null;
                this.searchData.supplierId = null;
                this.searchData.carrierId = null;
                this.searchData.asnState = null;
                this.searchData.billNo = "";
                this.searchData.billSource = "";
                this.searchData.asnType = "";
                this.searchData.platformCode = "";
                this.searchData.orderNo = "";
                this.searchData.createTimeArr = [];
                this.searchData.expectTimeArr = [];
                this.searchData.startCreateTime = "";
                this.searchData.endCreateTime = "";
                this.searchData.startExpectTime = "";
                this.searchData.endExpectTime = "";
            },
            getAsnData() {
                var that = this;
                let searchData = PF.JSON(this.searchData);
                if (searchData.createTimeArr.length > 0) {
                    searchData.startCreateTime = searchData.createTimeArr[0];
                    searchData.endCreateTime = searchData.createTimeArr[1];
                }
                if (searchData.expectTimeArr.length > 0) {
                    searchData.startExpectTime = searchData.expectTimeArr[0];
                    searchData.endExpectTime = searchData.expectTimeArr[1];
                }
                that.loading.masterTable = true;
                IOT.getServerData("/asn/masters/list2", "get", searchData, (ret) => {
                    that.loading.masterTable = false;
                    if (ret.code === 200) {
                        this.asnBills = ret.rows;
                        console.log(JSON.stringify(ret.rows))
                        this.searchData.total = ret.total;
                        this.searchData.pageNum = ret.pageNumber;
                    } else {
                        IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                    }
                });
            },
            getPlatformData() {
                IOT.getServerData(
                    "/platforms/findByWareId",
                    "get",
                    { wareId: PF.getLocal("wareId", "number") },
                    (ret) => {
                        if (ret.code === 200) {
                            this.platforms = ret.rows;
                        } else {
                            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                        }
                    }
                );
            },
            getCarrierData() {
                IOT.getServerData("/carriers/allList", "get", {}, (ret) => {
                    if (ret.code === 200) {
                        this.carriers = ret.rows;
                    } else {
                        IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                    }
                });
            },
            resetForm(formName) {
                // 重置
                this.$refs[formName].resetFields();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            commitFile() {
                IOT.showOverlay("保存中，请稍等...");
                let list = PF.JSON(this.multipleSelection);
                let billNos = [];
                for (let i = 0; i < list.length; i++) {
                    billNos.push(list[i].billNo);
                }
                IOT.getServerData(
                    "/asn/masters/file",
                    "post",
                    { billNos: billNos },
                    (ret) => {
                        IOT.hideOverlay();
                        this.multipleSelection = [];
                        if (ret.code === 200) {
                            IOT.tips("归档成功！", "success");
                            this.getAsnData();
                        } else {
                            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                        }
                    }
                );
            },
            getCode() {
                var that = this;
                document.onkeypress = function (e) {
                    that.getAsnData();
                };
            },
        },
        created() {
            this.getAsnData();
            this.getPlatformData();
            this.getCarrierData();
            PF.getSysParamUdfData("asnUdfHs", [], (data, udfs) => {
                this.asnUdfHs = udfs;
            });
//            PF.getOrganizations((rows) => {
//                this.organizations = rows;
//            });
            PF.getSuppliers((rows) => {
                this.suppliers = rows;
            });
            PF.getDataDictUdfData("asnType", (rows) => {
                this.asnTypes = rows;
            });
            PF.getCarriers((rows) => {
                this.carriers = rows;
            });
            this.getCode();
        },
        mounted() {},
    };
</script>

<style scoped lang="less">
    .asnBill {
    }
</style>
